<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{.title}}</title>
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/css/editor.css">
    <!-- 使用本地样式，不依赖外部CDN -->
    <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
</head>
<body>
    <div id="app">
        <!-- 顶部工具栏 -->
        <header class="toolbar">
            <div class="toolbar-left">
                <h1 class="logo">MarkEdit</h1>
                <div class="file-actions">
                    <button id="new-file" class="btn btn-secondary">新建</button>
                    <button id="open-file" class="btn btn-secondary">打开</button>
                    <div class="save-dropdown">
                        <button id="save-file" class="btn btn-primary">保存</button>
                        <button id="save-dropdown-btn" class="btn btn-primary dropdown-toggle" title="保存选项">▼</button>
                        <div id="save-dropdown-menu" class="dropdown-menu">
                            <button id="save-local" class="dropdown-item">保存到本地</button>
                            <button id="save-account" class="dropdown-item">保存到我的文件</button>
                            <button id="save-as" class="dropdown-item">另存为...</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="toolbar-center">
                <div class="view-toggle">
                    <button id="edit-mode" class="btn btn-toggle active">编辑</button>
                    <button id="preview-mode" class="btn btn-toggle">预览</button>
                    <button id="split-mode" class="btn btn-toggle">分屏</button>
                </div>
            </div>
            <div class="toolbar-right">
                <div class="export-actions">
                    <button id="export-pdf" class="btn btn-secondary">导出PDF</button>
                    <button id="export-word" class="btn btn-secondary">导出Word</button>
                    <button id="export-html" class="btn btn-secondary">导出HTML</button>
                </div>
                <div class="account-actions">
                    <button id="login-btn" class="btn btn-secondary">登录</button>
                    <button id="register-btn" class="btn btn-secondary">注册</button>
                    <div id="user-menu" class="user-menu" style="display: none;">
                        <span id="username-display" class="username"></span>
                        <button id="logout-btn" class="btn btn-secondary">退出</button>
                    </div>
                </div>
                <button id="settings" class="btn btn-icon">⚙️</button>
            </div>
        </header>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 侧边栏 -->
            <aside id="sidebar" class="sidebar">
                <div class="sidebar-header">
                    <div class="sidebar-tabs">
                        <button id="local-files-tab" class="tab-btn active" data-tab="local-files">本地文件</button>
                        <button id="account-files-tab" class="tab-btn" data-tab="account-files">我的文件</button>
                    </div>
                    <div class="sidebar-tools">
                        <button id="refresh-tree" class="tool-btn" title="刷新">🔄</button>
                        <button id="toggle-sidebar" class="tool-btn" title="隐藏侧边栏">◀</button>
                    </div>
                </div>
                <div class="sidebar-content">
                    <!-- 本地文件浏览器 -->
                    <div id="local-files" class="tab-content active">
                        <div id="directory-tree" class="directory-tree">
                            <div class="tree-loading">
                                <span>加载中...</span>
                            </div>
                        </div>
                    </div>
                    <!-- 账户文件浏览器 -->
                    <div id="account-files" class="tab-content">
                        <div id="account-login-prompt" class="login-prompt">
                            <p>请先登录以访问您的文件</p>
                            <button id="prompt-login-btn" class="btn btn-primary">登录</button>
                        </div>
                        <div id="account-file-tree" class="directory-tree" style="display: none;">
                            <div class="account-file-actions">
                                <button id="new-folder-btn" class="btn btn-small">新建文件夹</button>
                                <button id="upload-file-btn" class="btn btn-small">上传文件</button>
                            </div>
                            <div id="account-tree-content" class="tree-loading">
                                <span>加载中...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </aside>

            <!-- 编辑器区域 -->
            <div id="editor-panel" class="panel">
                <div class="panel-header">
                    <span class="panel-title">Markdown编辑器</span>
                    <div class="editor-tools">
                        <button id="bold" class="tool-btn" title="粗体">B</button>
                        <button id="italic" class="tool-btn" title="斜体">I</button>
                        <button id="heading" class="tool-btn" title="标题">H</button>
                        <button id="link" class="tool-btn" title="链接">🔗</button>
                        <button id="image" class="tool-btn" title="图片">🖼️</button>
                        <button id="code" class="tool-btn" title="代码">💻</button>
                        <button id="table" class="tool-btn" title="表格">📊</button>
                        <div class="tool-separator"></div>
                        <button id="inline-math" class="tool-btn" title="行内数学公式">$</button>
                        <button id="block-math" class="tool-btn" title="块级数学公式">$$</button>
                        <div class="math-dropdown">
                            <button id="math-symbols" class="tool-btn dropdown-btn" title="数学符号">∑</button>
                            <div class="dropdown-content math-symbols-panel">
                                <div class="symbol-group">
                                    <span class="group-title">基本运算</span>
                                    <button class="symbol-btn" data-symbol="+">+</button>
                                    <button class="symbol-btn" data-symbol="-">-</button>
                                    <button class="symbol-btn" data-symbol="\times">×</button>
                                    <button class="symbol-btn" data-symbol="\div">÷</button>
                                    <button class="symbol-btn" data-symbol="\pm">±</button>
                                    <button class="symbol-btn" data-symbol="\mp">∓</button>
                                </div>
                                <div class="symbol-group">
                                    <span class="group-title">关系符号</span>
                                    <button class="symbol-btn" data-symbol="=">=</button>
                                    <button class="symbol-btn" data-symbol="\neq">≠</button>
                                    <button class="symbol-btn" data-symbol="\leq">≤</button>
                                    <button class="symbol-btn" data-symbol="\geq">≥</button>
                                    <button class="symbol-btn" data-symbol="\approx">≈</button>
                                    <button class="symbol-btn" data-symbol="\equiv">≡</button>
                                </div>
                                <div class="symbol-group">
                                    <span class="group-title">希腊字母</span>
                                    <button class="symbol-btn" data-symbol="\alpha">α</button>
                                    <button class="symbol-btn" data-symbol="\beta">β</button>
                                    <button class="symbol-btn" data-symbol="\gamma">γ</button>
                                    <button class="symbol-btn" data-symbol="\delta">δ</button>
                                    <button class="symbol-btn" data-symbol="\pi">π</button>
                                    <button class="symbol-btn" data-symbol="\theta">θ</button>
                                </div>
                                <div class="symbol-group">
                                    <span class="group-title">函数模板</span>
                                    <button class="symbol-btn" data-template="\frac{}{}">\frac{a}{b}</button>
                                    <button class="symbol-btn" data-template="\sqrt{}">\sqrt{x}</button>
                                    <button class="symbol-btn" data-template="^{}">x^{n}</button>
                                    <button class="symbol-btn" data-template="_{}">x_{n}</button>
                                    <button class="symbol-btn" data-template="\sum_{i=1}^{n}">\sum</button>
                                    <button class="symbol-btn" data-template="\int_{a}^{b}">\int</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="editor-container">
                    <textarea id="markdown-editor" placeholder="在这里输入Markdown内容..."></textarea>
                </div>
            </div>

            <!-- 预览区域 -->
            <div id="preview-panel" class="panel">
                <div class="panel-header">
                    <span class="panel-title">实时预览</span>
                    <div class="preview-tools">
                        <button id="sync-scroll" class="tool-btn active" title="同步滚动">🔄</button>
                        <button id="refresh-preview" class="tool-btn" title="刷新预览">🔄</button>
                    </div>
                </div>
                <div id="preview-container">
                    <div id="preview-content">
                        <div class="welcome-message">
                            <h2>欢迎使用 MarkEdit</h2>
                            <p>开始在左侧编辑器中输入Markdown内容，右侧将实时显示预览效果。</p>
                            <h3>支持的功能：</h3>
                            <ul>
                                <li>✅ 标准Markdown语法</li>
                                <li>✅ PlantUML图表</li>
                                <li>✅ Mermaid图表</li>
                                <li>✅ LaTeX数学公式</li>
                                <li>✅ 代码高亮</li>
                                <li>✅ 表格支持</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </main>

        <!-- 状态栏 -->
        <footer class="status-bar">
            <div class="status-left">
                <span id="cursor-position">行 1, 列 1</span>
                <span id="word-count">字数: 0</span>
            </div>
            <div class="status-right">
                <span id="file-status">未保存</span>
                <span id="connection-status">已连接</span>
            </div>
        </footer>
    </div>

    <!-- 设置面板 -->
    <div id="settings-panel" class="modal hidden">
        <div class="modal-content">
            <div class="modal-header">
                <h3>设置</h3>
                <button id="close-settings" class="btn btn-icon">✕</button>
            </div>
            <div class="modal-body">
                <div class="settings-section">
                    <h4>编辑器设置</h4>
                    <label>
                        <input type="checkbox" id="enable-vim" /> 启用Vim模式
                    </label>
                    <label>
                        <input type="checkbox" id="enable-word-wrap" checked /> 自动换行
                    </label>
                    <label>
                        <input type="checkbox" id="enable-line-numbers" checked /> 显示行号
                    </label>
                </div>
                <div class="settings-section">
                    <h4>预览设置</h4>
                    <label>
                        <input type="checkbox" id="enable-mermaid" checked /> 启用Mermaid图表
                    </label>
                    <label>
                        <input type="checkbox" id="enable-plantuml" checked /> 启用PlantUML图表
                    </label>
                    <label>
                        <input type="checkbox" id="enable-katex" checked /> 启用LaTeX公式
                    </label>
                </div>
                <div class="settings-section">
                    <h4>PlantUML设置</h4>
                    <label>
                        PlantUML服务器地址:
                        <input type="text" id="plantuml-server" placeholder="http://localhost:8081" />
                    </label>
                    <label>
                        <input type="checkbox" id="plantuml-offline-mode" /> 离线模式
                    </label>
                    <div class="setting-description">
                        <small>离线模式下将使用备用服务器列表。如果本地服务器不可用，请启用离线模式。</small>
                    </div>
                </div>
                <div class="settings-section">
                    <h4>导出设置</h4>
                    <label>
                        图片DPI:
                        <select id="image-dpi">
                            <option value="72">72 DPI (网页)</option>
                            <option value="150">150 DPI (标准)</option>
                            <option value="300" selected>300 DPI (高清)</option>
                            <option value="600">600 DPI (超高清)</option>
                        </select>
                    </label>
                    <label>
                        图片格式:
                        <select id="image-format">
                            <option value="png" selected>PNG</option>
                            <option value="jpeg">JPEG</option>
                            <option value="svg">SVG</option>
                        </select>
                    </label>
                </div>
            </div>
        </div>
    </div>

    <!-- 登录模态框 -->
    <div id="login-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>用户登录</h2>
                <span class="close" data-modal="login-modal">&times;</span>
            </div>
            <div class="modal-body">
                <form id="login-form">
                    <div class="form-group">
                        <label for="login-username">用户名:</label>
                        <input type="text" id="login-username" name="username" required>
                    </div>
                    <div class="form-group">
                        <label for="login-password">密码:</label>
                        <input type="password" id="login-password" name="password" required>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">登录</button>
                        <button type="button" class="btn btn-secondary" data-modal="login-modal">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div id="register-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>用户注册</h2>
                <span class="close" data-modal="register-modal">&times;</span>
            </div>
            <div class="modal-body">
                <form id="register-form">
                    <div class="form-group">
                        <label for="register-username">用户名:</label>
                        <input type="text" id="register-username" name="username" required>
                    </div>
                    <div class="form-group">
                        <label for="register-email">邮箱:</label>
                        <input type="email" id="register-email" name="email" required>
                    </div>
                    <div class="form-group">
                        <label for="register-password">密码:</label>
                        <input type="password" id="register-password" name="password" required>
                    </div>
                    <div class="form-group">
                        <label for="register-confirm-password">确认密码:</label>
                        <input type="password" id="register-confirm-password" name="confirmPassword" required>
                    </div>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">注册</button>
                        <button type="button" class="btn btn-secondary" data-modal="register-modal">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 加载本地脚本 -->
    <script src="/static/js/app.js"></script>
    <script src="/static/js/editor.js"></script>
    <script src="/static/js/preview.js"></script>
    <script src="/static/js/directory-tree.js"></script>
    <script src="/static/js/auth.js"></script>
    <script src="/static/js/fileManager.js"></script>
    <script src="/static/js/saveManager.js"></script>
    <script src="/static/js/exportManager.js"></script>
    <script src="/static/js/tocManager.js"></script>
    
    <!-- Mock API for testing without backend -->
    <script>
        // Mock API endpoints for testing
        window.mockAPI = {
            parseMarkdown: function(content) {
                return new Promise((resolve) => {
                    // Simple markdown to HTML conversion for testing
                    let html = content
                        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
                        .replace(/\*(.*?)\*/g, '<em>$1</em>')
                        .replace(/`(.*?)`/g, '<code>$1</code>')
                        .replace(/^# (.*$)/gim, '<h1>$1</h1>')
                        .replace(/^## (.*$)/gim, '<h2>$1</h2>')
                        .replace(/^### (.*$)/gim, '<h3>$1</h3>')
                        .replace(/^\> (.*$)/gim, '<blockquote>$1</blockquote>')
                        .replace(/\n/g, '<br>');
                    
                    setTimeout(() => {
                        resolve({
                            success: true,
                            html: html
                        });
                    }, 100);
                });
            }
        };
        
        // Override fetch for API calls
        const originalFetch = window.fetch;
        window.fetch = function(url, options) {
            if (url === '/api/markdown/parse') {
                const body = JSON.parse(options.body);
                return Promise.resolve({
                    ok: true,
                    json: () => window.mockAPI.parseMarkdown(body.content)
                });
            }
            return originalFetch.apply(this, arguments);
        };
        
        console.log('MarkEdit frontend loaded with mock API');
    </script>
</body>
</html>